<!doctype html>
<html class="no-js fixed-layout">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>Amaze UI Admin index Examples</title>
		<meta name="description" content="这是一个 index 页面">
		<meta name="keywords" content="index">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="stylesheet" href="assets/css/amazeui.min.css" />
		<link rel="stylesheet" href="assets/css/admin.css">
		<link rel="stylesheet" href="assets/css/admin_custom.css" />
	</head>

	<body>
		<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->
		<style>
			.pd8 {
				padding: 0.7rem;
			}
			
			@media only screen and (min-width: 1330px) {
				.show1 {
					display: none;
				}
			}
			
			@media (min-width: 1330px) {
				.show1 {
					display: none;
				}
			}
			
			.am-nav-pills>li+li {
				margin-left: 0px !important;
			}
			
			.am-topbar,
			.am-topbar a {
				color: #ddd;
			}
			
			.am-nav>li>a:focus,
			.am-nav>li>a:hover {
				background-color: #4f627e;
			}
			
			.headerbg {
				border-color: #50627f !important;
			}
			
			body {
				font-size: 1.4em;
			}
			
			.admin-sidebar-list li a {
				padding-left: 15px;
			}
			
			.am-offcanvas-bar {
				width: 245px;
			}
			
			.headermenu span {
				display: block;
				padding-bottom: 8px;
			}
			
			.fixed2 {
				top: 50px !important;
			}
			
			.fixed2 {
				top: 50px;
			}
			
			.inputfocus {
				display: block;
				padding: .5em;
				font-size: 1.6rem;
				line-height: 1.2;
				color: #555;
				vertical-align: middle;
				background-color: #fff;
				background-image: none;
				border: 1px solid #ccc;
				width: 40%;
				height: 38px;
				border-color: #0e90d2;
				transition: width 0.2s;
				-moz-transition: width 0.2s;
				/* Firefox 4 */
				-webkit-transition: width 0.2s;
				/* Safari and Chrome */
				-o-transition: width 0.2s;
				/* Opera */
			}
			
			.inputfocus:focus {
				width: 100%;
			}
			.am-form-inline div{
				margin: 5px !important;
			}
						
		</style>
		<script src="assets/js/jquery.min.js"></script>
		<script language="JavaScript">
			$(function() {
				$(".am-icon-search").parent("button").click(function() {
					var inPut = $(this).parents(".am-input-group").find("input").css("display");
					switch (inPut) {
						case "block":
							$(this).parents(".am-input-group").find("input").fadeOut(200)
								//alert("Ceshi")
							break
						case "none":
							$(this).parents(".am-input-group").find("input").fadeIn(200)
								//alert("none")
							break
					}
					var checkde = $(".am-input-group-danger").find("input[type=checkbox]").prop("checked")
				})
				$(".am-input-group-danger").find("input[type=checkbox]").click(function() {
					var checkde = $(".am-input-group-danger").find("input[type=checkbox]").prop("checked")
					switch (checkde) {
						case true:
							$(this).parents(".am-input-group").find("input[type=text]").animate({
									"width": "100%"
								})
								//alert("Ceshi")
							break
						case false:
							$(this).parents(".am-input-group").find("input[type=text]").animate({
									"width": "0px",
									"padding": "0px"
								})
								//alert("none")
							break
					}
				})
				$(':checkbox[name=all]').click(function() {
					if (this.checked) {
						$("table").find(':checkbox').prop('checked', 'checked');
					} else {
						$(':checkbox').removeAttr('checked');
					}
				})
				$('#delcon').click(function() {
					var num = 0;
					$(':checkbox[name=subBox]').each(function() {
							if ($(this).prop('checked')) {
								$(this).closest('tr').remove();
								num++;
							}
						})
						//				alert('共删除了【'+num+'】行');
				})
				$(".delsingle").click(
					function() {
						$(this).closest(".file").remove();
					}
				)
			})
		</script>
		<!--[if lte IE 9]>
<p class="browsehappy">你正在使用<strong>过时</strong>的浏览器，Amaze UI 暂不支持。 请 <a href="http://browsehappy.com/" target="_blank">升级浏览器</a>
  以获得更好的体验！</p>
<![endif]-->

		<!-- content start -->
		<div class="admin-content">

			<div class="pageheader notab">
				<h1 class="pagetitle">输入组件</h1>
				<span class="pagedesc">This is a sample description of a page</span>
			</div>
			<div class="am-margin-bottom"></div>
			<div class="am-g">

				<div class="am-u-sm-12 am-u-md-12">
					<form class="am-form-inline" role="form">
						<div class="am-form-group">
							<input type="email" class="am-form-field" placeholder="ID">
						</div>

						<div class="am-form-group">
							<input type="password" class="am-form-field" placeholder="姓名">
						</div>
						<div class="am-form-group">
							<label for="doc-select-1">咨询</label>
							<select id="doc-select-1" class="am-radius">
								<option value="option1">选项一...</option>
								<option value="option2">选项二.....</option>
								<option value="option3">选项三........</option>
							</select>
							<span class="am-form-caret"></span>
						</div>

						<div class="am-form-group">
							<label for="doc-select-1">发布人</label>
							<select id="doc-select-1" class="am-radius">
								<option value="option1">选项一...</option>
								<option value="option2">选项二.....</option>
								<option value="option3">选项三........</option>
							</select>
							<span class="am-form-caret"></span>
						</div>

						<div class="am-form-group">
							<input type="password" class="am-form-field" placeholder="密码">
						</div>

						<div class="am-form-group">
							<label for="doc-select-1">发布人</label>
							<select id="doc-select-1" class="am-radius">
								<option value="option1">选项一...</option>
								<option value="option2">选项二.....</option>
								<option value="option3">选项三........</option>
							</select>
							<span class="am-form-caret"></span>
						</div>

						<div class="am-form-group">
							<label for="doc-select-1"></label>
							<select id="doc-select-1" class="am-radius">
								<option value="option1">选项一...</option>
								<option value="option2">选项二.....</option>
								<option value="option3">选项三........</option>
							</select>
							<span class="am-form-caret"></span>
						</div>

						<div class="am-form-group">
							<input type="password" class="am-form-field" placeholder="微信">
						</div>
						<div class="am-form-group">
							<input type="password" class="am-form-field" placeholder="QQ">
						</div>

						<div class="am-checkbox">
							<label>
								<input type="checkbox"> 记住我
							</label>
						</div>
						<div class="am-form-group">
							<input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />
							<span>-</span>
							<input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />
						</div>
						<div class="am-form-group">
							<label class="am-radio-inline">
								<input type="radio" value="" name="docInlineRadio"> 每一分
							</label>
							<label class="am-radio-inline">
								<input type="radio" name="docInlineRadio"> 每一秒
							</label>
							<label class="am-radio-inline">
								<input type="radio" name="docInlineRadio"> 多好
							</label>
						</div>

						<button type="submit" class="am-btn am-btn-default">登录</button>
					</form>

				</div>

			</div>
			
			
			<div class="am-g">
				<div class="am-u-sm-12">
					<table class="am-table am-table-bd am-table-striped admin-content-table">
						<thead>
							<tr>
								<th class="table-check">
									<input type="checkbox" name="all">
								</th>
								<th>公众号名称</th>
								<th>微信号</th>
								<th>类型</th>
								<th>添加时间</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>
									<input type="checkbox">
								</td>
								<td>风清扬</td>
								<td><a href="#">feihuang</a></td>
								<td><span class="am-badge am-badge-success">服务号</span></td>
								<td>2015-12-18 05:14:30</td>
								<td>
									<button class="am-btn am-btn-secondary am-btn-xs">功能管理</button>
									<button class="am-btn  am-btn-xs">编辑</button>
									<button class="am-btn am-btn-success am-btn-xs">接口</button>
									<button class="am-btn am-btn-danger am-btn-xs">删除</button>

								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox">
								</td>
								<td>风清扬</td>
								<td><a href="#">feihuang</a></td>
								<td><span class="am-badge am-badge-success">服务号</span></td>
								<td>2015-12-18 05:14:30</td>
								<td>
									<button class="am-btn am-btn-secondary am-btn-xs">功能管理</button>
									<button class="am-btn  am-btn-xs">编辑</button>
									<button class="am-btn am-btn-success am-btn-xs">接口</button>
									<button class="am-btn am-btn-danger am-btn-xs">删除</button>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox">
								</td>
								<td>风清扬</td>
								<td><a href="#">feihuang</a></td>
								<td><span class="am-badge am-badge-success">服务号</span></td>
								<td>2015-12-18 05:14:30</td>
								<td>
									<button class="am-btn am-btn-secondary am-btn-xs">功能管理</button>
									<button class="am-btn  am-btn-xs">编辑</button>
									<button class="am-btn am-btn-success am-btn-xs">接口</button>
									<button class="am-btn am-btn-danger am-btn-xs">删除</button>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox">
								</td>
								<td>风清扬</td>
								<td><a href="#">feihuang</a></td>
								<td><span class="am-badge am-badge-success">服务号</span></td>
								<td>2015-12-18 05:14:30</td>
								<td>
									<button class="am-btn am-btn-secondary am-btn-xs">功能管理</button>
									<button class="am-btn  am-btn-xs">编辑</button>
									<button class="am-btn am-btn-success am-btn-xs">接口</button>
									<button class="am-btn am-btn-danger am-btn-xs">删除</button>
								</td>
							</tr>

							<tr>
								<td>
									<input type="checkbox">
								</td>
								<td>风清扬</td>
								<td><a href="#">feihuang</a></td>
								<td><span class="am-badge am-badge-success">服务号</span></td>
								<td>2015-12-18 05:14:30</td>
								<td>
									<button class="am-btn am-btn-secondary am-btn-xs">功能管理</button>
									<button class="am-btn  am-btn-xs">编辑</button>
									<button class="am-btn am-btn-success am-btn-xs">接口</button>
									<button class="am-btn am-btn-danger am-btn-xs">删除</button>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox">
								</td>
								<td>风清扬</td>
								<td><a href="#">feihuang</a></td>
								<td><span class="am-badge am-badge-success">服务号</span></td>
								<td>2015-12-18 05:14:30</td>
								<td>
									<button class="am-btn am-btn-secondary am-btn-xs">功能管理</button>
									<button class="am-btn  am-btn-xs">编辑</button>
									<button class="am-btn am-btn-success am-btn-xs">接口</button>
									<button class="am-btn am-btn-danger am-btn-xs">删除</button>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox">
								</td>
								<td>风清扬</td>
								<td><a href="#">feihuang</a></td>
								<td><span class="am-badge am-badge-success">服务号</span></td>
								<td>2015-12-18 05:14:30</td>
								<td>
									<button class="am-btn am-btn-secondary am-btn-xs">功能管理</button>
									<button class="am-btn  am-btn-xs">编辑</button>
									<button class="am-btn am-btn-success am-btn-xs">接口</button>
									<button class="am-btn am-btn-danger am-btn-xs">删除</button>
								</td>
							</tr>
							<tr>
								<td>
									<input type="checkbox">
								</td>
								<td>风清扬</td>
								<td><a href="#">feihuang</a></td>
								<td><span class="am-badge am-badge-success">服务号</span></td>
								<td>2015-12-18 05:14:30</td>
								<td>
									<button class="am-btn am-btn-secondary am-btn-xs">功能管理</button>
									<button class="am-btn  am-btn-xs">编辑</button>
									<button class="am-btn am-btn-success am-btn-xs">接口</button>
									<button class="am-btn am-btn-danger am-btn-xs">删除</button>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>

			<div class="am-g">
				<div class="am-u-md-6">
					<div class="am-panel am-panel-default">
						<div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-sq'}">输入框组<span class="am-icon-chevron-down am-fr"></span></div>
						<div class="am-panel-bd am-collapse am-in" id="collapse-panel-sq">
							<div class="am-g">
								<div class="am-u-lg-6">
									<div class="am-input-group am-input-group-danger ">
										<div class="am-input-group-label ">
											<input type="checkbox">
										</div>
										<input type="text" class="am-form-field am-radius " style="width: 0px; padding: 0px;">
									</div>
								</div>
								<div class="am-u-lg-6">
									<div class="am-input-group am-input-group-primary">
										<span class="am-input-group-btn">
        <button class="am-btn am-btn-primary" type="button"><span class="am-icon-search"></span></button>
										</span>
										<input type="text" class="am-form-field am-radius" placeholder="点击显示隐藏">
									</div>
								</div>

								<div class="am-u-lg-12 am-margin-top-sm">
									<div class="am-input-group am-input-group-primary">
										<span class="am-input-group-btn">
        <button class="am-btn am-btn-primary" type="button"><span class="am-icon-search"></span></button>
										</span>
										<input type="text" class=" am-radius inputfocus " placeholder="点击增加长度">
									</div>
								</div>

							</div>
							<div class="am-g am-padding">
								<div class="am-checkbox">
									<label>
										<input type="checkbox"> 复选框，选我选我选我</label>
								</div>
								<div class="am-form">
									<label for="doc-select-1">下拉多选框</label>
									<select id="doc-select-1" class="am-radius">
										<option value="option1">选项一...</option>
										<option value="option2">选项二.....</option>
										<option value="option3">选项三........</option>
									</select>
									<span class="am-form-caret"></span>

								</div>
								<div class="am-checkbox">
									<label>
										<input type="checkbox"> 复选框，选我选我选我
									</label>
								</div>

								<div class="am-radio">
									<label>
										<input type="radio" name="doc-radio-1" value="option1" checked> 单选框 - 选项1
									</label>
								</div>

								<div class="am-radio">
									<label>
										<input type="radio" name="doc-radio-1" value="option2"> 单选框 - 选项2
									</label>
								</div>

								<div class="am-form-group">
									<label class="am-checkbox-inline">
										<input type="checkbox" value="option1"> 选我
									</label>
									<label class="am-checkbox-inline">
										<input type="checkbox" value="option2"> 同时可以选我
									</label>
									<label class="am-checkbox-inline">
										<input type="checkbox" value="option3"> 还可以选我
									</label>
								</div>

								<div class="am-form-group">
									<label class="am-radio-inline">
										<input type="radio" value="" name="docInlineRadio"> 每一分
									</label>
									<label class="am-radio-inline">
										<input type="radio" name="docInlineRadio"> 每一秒
									</label>
									<label class="am-radio-inline">
										<input type="radio" name="docInlineRadio"> 多好
									</label>
								</div>

								<div class="am-form">
									<label for="doc-select-2">多选框</label>
									<select multiple="multiple" class="" id="doc-select-2">
										<option>1</option>
										<option>2</option>
										<option>3</option>
										<option>4</option>
										<option>5</option>
									</select>
								</div>

							</div>
						</div>
					</div>

					<div class="am-panel am-panel-default">
						<div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-1'}">文件上传<span class="am-icon-chevron-down am-fr"></span></div>
						<div class="am-panel-bd am-collapse am-in" id="collapse-panel-1">
							<form action="" class="am-form" data-am-validator>
								<p>
									<input type="text" class="am-form-field" placeholder="日历组件" data-am-datepicker readonly required />
								</p>
								<p>
									<button class="am-btn am-btn-primary">提交</button>
								</p>
							</form>

						</div>
					</div>

				</div>

				<div class="am-u-md-6">
					<div class="am-panel am-panel-default">
						<div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-4'}">任务 task<span class="am-icon-chevron-down am-fr"></span></div>
						<div id="collapse-panel-4" class="am-panel-bd am-collapse am-in">

							<ul class="am-list admin-content-task">
								<li>
									<div class="admin-task-meta"> Posted on 25/1/2120 by John Clark</div>
									<div class="admin-task-bd">
										The starting place for exploring business management; helping new managers get started and experienced managers get better.
									</div>
									<div class="am-cf">
										<div class="am-btn-toolbar am-fl">
											<div class="am-btn-group am-btn-group-xs">
												<button type="button" class="am-btn am-btn-default"><span class="am-icon-check"></span></button>
												<button type="button" class="am-btn am-btn-default"><span class="am-icon-pencil"></span></button>
												<button type="button" class="am-btn am-btn-default"><span class="am-icon-times"></span></button>
											</div>
										</div>
										<div class="am-fr">
											<button type="button" class="am-btn am-btn-default am-btn-xs">删除</button>
										</div>
									</div>
								</li>
								<li>
									<div class="admin-task-meta"> Posted on 25/1/2120 by 呵呵呵</div>
									<div class="admin-task-bd">
										基兰和狗熊出现在不同阵营时。基兰会获得BUFF，“装甲熊憎恨者”。狗熊会获得BUFF，“时光老人憎恨者”。
									</div>
									<div class="am-cf">
										<div class="am-btn-toolbar am-fl">
											<div class="am-btn-group am-btn-group-xs">
												<button type="button" class="am-btn am-btn-default"><span class="am-icon-check"></span></button>
												<button type="button" class="am-btn am-btn-default"><span class="am-icon-pencil"></span></button>
												<button type="button" class="am-btn am-btn-default"><span class="am-icon-times"></span></button>
											</div>
										</div>
										<div class="am-fr">
											<button type="button" class="am-btn am-btn-default am-btn-xs">删除</button>
										</div>
									</div>
								</li>
							</ul>
							<div class="am-btn-group">
								<button class="am-btn am-btn-secondary">下拉按钮</button>
								<div class="am-dropdown" data-am-dropdown>
									<button class="am-btn am-btn-secondary am-dropdown-toggle" data-am-dropdown-toggle> <span class="am-icon-caret-down"></span></button>
									<ul class="am-dropdown-content">
										<li class="am-dropdown-header">标题</li>
										<li><a href="#">快乐的方式不只一种</a></li>
										<li class="am-active"><a href="#">最荣幸是</a></li>
										<li><a href="#">谁都是造物者的光荣</a></li>
										<li class="am-disabled"><a href="#">就站在光明的角落</a></li>
										<li class="am-divider"></li>
										<li><a href="#">天空海阔 要做最坚强的泡沫</a></li>
									</ul>
								</div>
							</div>
							<li class="am-dropdown" data-am-dropdown>
								<a class="am-dropdown-toggle" data-am-dropdown-toggle href="javascript:;">
            下拉 <span class="am-icon-caret-down"></span>
          </a>
								<ul class="am-dropdown-content">
									<li><a href="#">带我去月球</a></li>
									<li><a href="#">还是回地球</a></li>
									<li class="am-disabled"><a href="#">臣妾做不到</a></li>
								</ul>
							</li>
						</div>
					</div>

					<div class="am-panel am-panel-default">
						<div class="am-panel-hd am-cf" data-am-collapse="{target: '#collapse-panel-3'}">输入框组<span class="am-icon-chevron-down am-fr"></span></div>
						<div class="am-panel-bd am-collapse am-in am-cf" id="collapse-panel-3">

							<div class="am-input-group am-input-group-lg am-margin-bottom-sm">
								<span class="am-input-group-label">@</span>
								<input type="text" class="am-form-field" placeholder="Username">
							</div>

							<div class="am-input-group am-margin-bottom-sm">
								<span class="am-input-group-label">@</span>
								<input type="text" class="am-form-field" placeholder="Username">
							</div>

							<div class="am-input-group am-input-group-sm am-margin-bottom-sm">
								<span class="am-input-group-label">@</span>
								<input type="text" class="am-form-field" placeholder="Username">
							</div>

							<div class="am-btn-group" data-am-button>
								<label class="am-btn am-btn-primary">
									<input type="checkbox" name="doc-js-btn" value="苹果"> 苹果
								</label>
								<label class="am-btn am-btn-primary">
									<input type="checkbox" name="doc-js-btn" value="橘子"> 橘子
								</label>
								<label class="am-btn am-btn-primary am-disabled">
									<input type="checkbox" name="doc-js-btn" value="香蕉"> 香蕉
								</label>
							</div>
							<ul class="am-pagination am-fr admin-content-pagination">
								<li class="am-disabled"><a href="#">&laquo;</a></li>
								<li class="am-active"><a href="#">1</a></li>
								<li><a href="#">2</a></li>
								<li><a href="#">3</a></li>
								<li><a href="#">4</a></li>
								<li><a href="#">5</a></li>
								<li><a href="#">&raquo;</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- content end -->

		<!--[if lt IE 9]>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->

		<!--<![endif]-->
		<script src="assets/js/amazeui.min.js"></script>
		<script src="assets/js/app.js"></script>

	</body>

</html>